<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flexbox</title>
	<style type="text/css">
	  body{
	  margin:0px;
	  }
	  .container{
		display:flex;
		padding:20px;
		flex-flow:row wrap;
		justify-content:space-between;
		align-items:center;
	 }
	 .box{
		border:1px solid #f00;
		width:150px;
		box-sizing: border-box;
	 }
	 .box_1{
		height:120px;
	 }
	 .box_2{
		height:100px;
	 }
	 .box_3{
		height:40px;
	 }
	 .box_4{
		border-color:#0f0;
		height:200px;
	}
	@media screen and (max-width:640px){
		.container{
			align-items:flex-start;
		}
	}
	@media screen and (max-width:639px){
		.box_4{
			order:-1;
		}
	}
    </style>
</head>
<body>
  <div class="container">
	<div class="box box_1"></div>
	<div class="box box_2"></div>
	<div class="box box_3"></div>
	<div class="box box_4"></div>
  </div>
</body>
</html>